Trasformare un link in un bottone

Semplici (a.bottone1)

Questi link non sono "spezzabili" per andare a capo. Ridimensiona la finestra per capire meglio. Questo è fatto grazie a display:inline-block;

Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1 Bottone tipo 1

Semplici e spaziati (a.bottone2)

Questi link sono uguali a quelli sopra, ma grazie al margin, possiamo mettere dello spazio tra i link per distanziarli

Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2 Bottone tipo 2

Con la cornice (a.bottone3)

Aggiungiamo un bordo e un po' di padding (spazio tra il testo e il bordo) per farli sembrare più dei bottoni

Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3 Bottone tipo 3

Più decorati (a.bottone4)

Togliamo la sottolineatura, arrotondiamo i bordi, e cambiamo i colori

Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4 Bottone tipo 4

Più decorati ancora (a.bottone5)

Aggiungiamo uno sfondo all'interno del bottone

Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5 Bottone tipo 5

Altro stile, interattivo (a.bottone6, 2 regole)

Prova a spostare il mouse sopra a questi bottoni

Bottone tipo 6 Bottone tipo 6 Bottone tipo 6 Bottone tipo 6 Bottone tipo 6 Bottone tipo 6 Bottone tipo 6 Bottone tipo 6

Altro stile, interattivo (a.bottone7, 2 regole)

Prova a tenere premuto il mouse su uno di questi bottoni

Bottone tipo 7 Bottone tipo 7 Bottone tipo 7 Bottone tipo 7 Bottone tipo 7 Bottone tipo 7 Bottone tipo 7 Bottone tipo 7

Questo stile è detto NEUMORPHISM nel design